<template>
  <!-- 值得买标题 -->
  <div class="Con">
      <div class="row" style="position: fixed;top: 0; box-sizing: border-box; width: 100%; z-index: 1000;">
        <van-icon name="wap-home-o"/>
        <div class='pay_z'>值得买</div>
        <div class="icon" style="position: relative; margin-right: .2rem">
            <van-icon name="search" />
            <van-icon name="shopping-cart-o" style="margin-left: .3rem; margin-right: .07rem" />
            <i class="car"></i>
        </div>
      </div>
    <!-- 值得买背景图 -->
    <div class='container'>
      <div class="title">
          <img src="../images/topic_logo.c2284970.png" alt="" class="T_img">
          <div class="T_text">严选好物 用心生活</div>
          <img src="../images/topic_title_bg.2373a140.png" alt="" class="bc_bmg">
      </div>
      <!-- 值得买轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>1</van-swipe-item>
            <van-swipe-item>2</van-swipe-item>
            <van-swipe-item>3</van-swipe-item>
            <van-swipe-item>4</van-swipe-item>
      </van-swipe>
    </div>
    <!-- 瀑布流分布 -->
    <div class="Waterfalls">
		    <div class="items" v-for="item,index in Waterfall" :key="index">
		        <img :src=item.picUrl alt="" />
            <div class="titles">{{item.title}}</div>
            <img :src="item.avatar" alt="" class="Tou"/>
            <text>{{item.nickname}}</text>
		    </div>
        <!-- <div class="items">
		        <img  src="../images/2.jpg" alt="" />
            <img src="../images/1.jpg" alt="" class="Tou"/>
            <text>海绵宝宝啦啦啦啦啦啦啊啊</text>
		    </div>
        <div class="items">
		        <img  src="../images/2.jpg" alt="" />
            <img src="../images/1.jpg" alt="" class="Tou"/>
            <text>海绵宝宝啦啦啦啦啦啦啊啊</text>
		    </div>
        <div class="items">
		        <img  src="../images/1.jpg" alt="" />
            <img src="../images/2.jpg" alt="" class="Tou"/>
            <text>海绵宝宝啦啦啦啦啦啦啊啊</text>
		    </div>
        <div class="items">
		        <img  src="../images/1.jpg" alt="" />
            <img src="../images/2.jpg" alt="" class="Tou"/>
            <text>海绵宝宝啦啦啦啦啦啦啊啊</text>
		    </div>
        <div class="items">
		        <img  src="../images/1.jpg" alt="" />
            <img src="../images/2.jpg" alt="" class="Tou"/>
            <text>海绵宝宝啦啦啦啦啦啦啊啊</text>
		    </div>
        <div class="items">
		        <img  src="../images/1.jpg" alt="" />
            <img src="../images/2.jpg" alt="" class="Tou"/>
            <text>海绵宝宝啦啦啦啦啦啦啊啊</text>
		    </div>
        <div class="items">
		        <img  src="../images/1.jpg" alt="" />
            <img src="../images/2.jpg" alt="" class="Tou"/>
            <text>海绵宝宝啦啦啦啦啦啦啊啊</text>
		    </div> -->
    </div>
</div>
</template>

<script setup lang='ts'>
import { onMounted,ref } from 'vue';
import TopicApi from '@/api/topic'
import { showNotify } from 'vant';
// 用于存储瀑布流的数据
const Waterfall = ref<any>([])
// 发送请求
const getWaterFallData = async () =>{
      try{
        let result = await TopicApi.getWaterFall()
        Waterfall.value = result.data.result[0].topics
        console.log('获取的数据',Waterfall.value); //请求到的数据
      }catch(error){
        showNotify({type:'danger',message:'获取数据失败'})
      }
    }
  onMounted(()=>{
      getWaterFallData()
  })
</script>

<style scoped>
.Con{
  width: 100%;
  height: 2000px;
  overflow: hidden;
  background:  #EDEDEC;
}
.row {
 display: flex;
 justify-content: space-between;
 align-items:center;
 padding: 0 .21333rem 0 .32rem;
 height: 1.5rem;
 background-color: #fafafa;
}
.row img {
  width: 2rem;  
}
.van-icon {
  font-size: .8rem;
  color: #333;
}
.pay_z {
  font-size: .5rem;
  color: #000;
}
.container {
  position: relative;
  padding-top: 1.45rem;
  background: #eee;
}
.title  {
  position: absolute;
  top: 0;
}
.T_img{
  position: absolute;
  width: 1.8rem;
  height: auto;
  top: 1.8rem;
  left: .12rem;
}
.T_text {
  font-size: .4rem;
  line-height: .44rem;
  height: .44rem;
  position: absolute;
  font-family: 'PingFangSC-Regular';
  left: 2rem;
  top: 2.1rem;
  color: #FFF;
}
.bc_bmg{
  width: 10.0rem;
  height: auto;
}
/* 轮播样式 */
.my-swipe{
  width: 355px;
  height: 270px;
  position: absolute;
  top: 3rem;
  left: 0.3rem;
  z-index:0;
  border-radius: 6%;
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: pink;
}
/* 瀑布流样式 */
.Waterfalls{
  position: absolute;
  top: 10.5rem;
  left: 0.3rem;
  width: 355px;
  height: 100%;
  column-count: 2;
  column-gap: 10px;
  z-index: 1;
}
.items {
  margin-bottom: 10px;
}
.items img{
  width: 100%;
  height:100%;
  border-radius: 5%;
}
.items text{
  margin-left:3px;
  font-size: .28rem;
  line-height: .4rem;
  font-family: PingFangSC-Regular;
  text-align: left;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
}
.items .Tou{
  margin-top: 5px;
  margin-left: 5px;
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
.items .titles{
  /* width: 20px; */
  font-size: .28rem;
  line-height: .4rem;
}
</style>